<template>
  <div class="shop scrollbar" :style="{ height: height + 'px' }">
    <shop-item id="1" @install="onInstall" @eval="onEval"/>
    <shop-item id="2" @install="onInstall" @eval="onEval"/>
    <shop-item id="3" @install="onInstall" @eval="onEval"/>
    <shop-item id="4" @install="onInstall" @eval="onEval"/>
  </div>
</template>

<script>
import ShopItem from './ShopItem.vue'
export default {
  components:{ShopItem},
  data() {
    return {
      height: document.documentElement.clientHeight - 50,
    };
  },
  methods:{
    onInstall(id){
      console.log(`根据id:${id}从后台获取子系统信息，并增加到菜单中！`)
    },
    onEval(id,val){
      console.log(id,val,'-1："踩"，1："赞"')
    }
  },
  mounted() {
    const self = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        self.height = window.fullHeight - 50;
      })();
    };
  },
};
</script>

<style lang="less" scoped>
.shop {
  background-color: #ececec;
  display: inline-flex;
  padding: 10px;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap; /*IE9以及一bai下du不支zhi持*/
  -webkit-flex-wrap: wrap;
  width: 400px;
  align-content: flex-start;
  overflow-x:hidden;
  overflow-y: auto;
}

</style>
